<?php echo $header; ?>
<div id="content">
    <div class="breadcrumb">
        <?php foreach ($breadcrumbs as $breadcrumb) { ?>
        <?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
        <?php } ?>
    </div>
    <?php if ($error_warning) { ?>
  <div class="warning"><?php echo $error_warning; ?></div>
  <?php } ?>
    <div class="box">
        <div class="heading">
            <h1><img src="view/image/customer.png" alt="" /> <?php echo $heading_title; ?></h1>
            <div class="buttons"><a onclick="$('#form').submit();" class="button"><?php echo $button_save; ?></a><a href="<?php echo $cancel; ?>" class="button"><?php echo $button_cancel; ?></a></div>
        </div>
        <div class="content">
            <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form">
                <table class="form_order">
                    <tr>
                        <td>
                            <?php echo $entry_supplier; ?>
                            <select name="supplier_id" id="select_supplier" >
                                <option value="0">-- Select --</option>
                                <?php foreach($suppliers as $supplier){ ?>
                                <?php if($supplier['supplier_id'] == $supplier_id){ ?>
                                    <option value="<?php echo $supplier['supplier_id']; ?>" selected="selected"><?php echo $supplier['name']; ?></option>
                                <?php }else{ ?>
                                    <option value="<?php echo $supplier['supplier_id']; ?>"><?php echo $supplier['name']; ?></option>
                                <?php } ?>
                                <?php } ?>
                            </select>
                            <hr style="border: 1px dotted #CCCCCC;">
                            <?php echo $entry_address; ?><input type="text" name="address" size="100" value="<?php echo $address; ?>" />
                            
                        </td>
                        <td colspan="2">
                        <?php echo $entry_note; ?><br/>
                        <textarea rows="4" cols="100" name="note"><?php echo $note; ?></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td><?php echo $entry_order_date; ?> <input type="text" name="order_date" class="datetime" value="<?php echo $order_date; ?>" /></td>
                        <td>
                            <?php echo $entry_store; ?>
                            <select name="store">
                            <option value="0">-- Select --</option>
                            <?php foreach($stores as $store){ ?>
                            <?php if($store['store_id'] == $store_id){ ?>
                                <option value="<?php echo $store['store_id']; ?>" selected="selected"><?php echo $store['name'] ?></option>
                            <?php }else{ ?>
                                <option value="<?php echo $store['store_id']; ?>"><?php echo $store['name'] ?></option>
                            <?php } ?>
                            <?php } ?>
                            </select>
                        </td>
                        <td>
                            <?php echo $entry_order_code; ?>
                            <input type="text" name="order_code" value="<?php echo $order_code; ?>" />
                        </td>
                    </tr>
                    
                </table>
                
                <table class="list">
                    <thead>
                        <tr>
                            <td class="center"><?php echo $column_purchase_code; ?></td>
                            <td class="center"><?php echo $column_name; ?></td>
                            <td class="center"><?php echo $column_quantity; ?></td>
                            <td class="center"><?php echo $column_unit; ?></td>
                            <td class="center"><?php echo $column_price; ?></td>
                            <td class="center"><?php echo $column_action; ?></td>
                        </tr>
                    </thead>
                    <?php $item_row = 0; ?>

                    <tbody id="list_item">
                    <?php if($items){ ?>
                    <?php foreach ($items as $item) { ?>
                        
                    
                        <tr id="item-row<?php echo $item_row; ?>">
                            <td class="center"><input type="text" name="purchase_code" readonly /></td>
                            <td>
                                <select name="items<?php echo $item_row; ?>[item_id]" onchange="ajaxItem()">
                                    
                                </select>
                            </td>
                            <td class="center"><input type="text" name="quantity" value="" /></td>
                            <td class="center"><input type="text" name="unit" readonly /></td>
                            <td class="center"><input type="text" name="price" value="" /></td>
                        </tr>
                    <?php $item_row++; ?>
                    <?php } ?>
                    <?php } ?>
                    </tbody>
                    
                </table>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
var item_row = <?php echo $item_row; ?>;
var countItem = 0;

$('#select_supplier').change(function (){
    var option = $('select[name=\'supplier_id\']').val();
    if(option != '*'){
        $('#item-row'+item_row).remove();
        addRow();
        $('select[name=\'supplier_id\']').attr('disabled', true);
    }else{
        $('#item-row'+item_row).remove();
        $('input[name=\'address\']').val('');
        $('.error').remove();
        $('tfoot').remove();
    }
});

function addRow() {
    countItem++;
    $('#item-row'+item_row + ' select[name=\'items'+item_row+'\']').attr('disabled', true);
    item_row++;    
    
    $('tfoot').remove();
    html = '<tr id="item-row'+ item_row + '">';
    html += '<td class="center"><input type="text" name="purchase_code" readonly /></td>';
    html += '<td>';
    html += '<select name="items'+item_row+'" onchange="ajaxItem()">';
    html += '</select>';                  
    html += '</td>';
    html += '<td class="center"><input type="text" name="quantity" value="" /></td>';
    html += '<td class="center"><input type="text" name="unit" readonly /></td>';
    html += '<td class="center"><input type="text" name="price" value="" /></td>';
    html += '<td><a class="button" onclick="$(\'#item-row'+item_row+'\').remove(); countItem--; checkCount();">Remove</a></td>';
    html += '</tr>';
    $('#list_item').append(html);
    $('#list_item').after('<tfoot><tr><td colspan="5"></td><td class="left"><a onclick="addRow();" class="button" id="addRow"><?php echo $button_add_item; ?></a></td></tr></tfoot>');
    loadItems();
    
}

function loadItems(){
    $.ajax({
            url: 'index.php?route=fa/purchase_order/getPurchases&token=<?php echo $token; ?>',
            data: 'supplier_id='+$('#select_supplier').val(),
            type:'post',
            dataType: 'json',
            beforeSend: function() {
                $('#select_supplier').after('<span class="wait">&nbsp;<img src="view/image/loading.gif" alt="" /></span>');
            },
            complete: function() {
                $('.wait').remove();
            },
            success: function(json){
                $('.error').remove();
                html = '<option>-- Select --</option>';
                if(json['items']){
                    for (i = 0; i < json['items'].length; i++) {
                        html += '<option value="' + json['items'][i]['item_id'] + '"';
                        if (json['items'][i]['item_id'] == '<?php echo $item_id; ?>') {
                            html += ' selected="selected"';
                        }
                        html += '>' + json['items'][i]['name'] + '</option>';
                    }
                    if(json['address']){
                        $('input[name=\'address\']').val(json['address']);
                    }
                    $('#item-row'+item_row+' select[name=\'items'+item_row+'\']').html(html);
                }else{
                    $('#item-row'+item_row).remove();
                    $('input[name=\'address\']').val('');
                    $('#select_supplier').after('<div class="error">No item for this supplier!</div>');
                    $('select[name=\'supplier_id\']').attr('disabled', false);
                    countItem--;
                    $('tfoot').remove();
                }
            }
        });

}

function ajaxItem(){
    $.ajax({
        url: 'index.php?route=fa/purchase_order/ajaxItem&token=<?php echo $token; ?>',
        data: 'item_id='+$('select[name=\'items'+item_row+'\']').val(),
        type:'post',
        dataType: 'json',
        beforeSend: function() {
            $('select[name=\'listItem\']').after('<span class="wait">&nbsp;<img src="view/image/loading.gif" alt="" /></span>');
        },
        complete: function() {
            $('.wait').remove();
        },
        success: function(json){
            
            $('#item-row'+item_row+' input[name=\'purchase_code\']').val(json['purchase_code']);
            $('#item-row'+item_row+' input[name=\'quantity\']').val(1);
            $('#item-row'+item_row+' input[name=\'unit\']').val(json['unit']);
            $('#item-row'+item_row+' input[name=\'price\']').val(json['price']);            
        }
    });
};
function checkCount(){
    if(countItem == 0){
        $('select[name=\'supplier_id\']').attr('disabled', false);
        $('tfoot').remove();
    }else{
        item_row--;
        $('#item-row'+item_row + ' select[name=\'items'+item_row+'\']').attr('disabled', false);
    }
}
</script>
<script type="text/javascript"><!--
$('.datetime').datepicker({dateFormat: 'yy-mm-dd'});
//--></script> 
<?php echo $footer; ?>